How to Add Numbered Pagination to Blogger Blog Posts

<div dir="ltr" style="text-align: left;" trbidi="on"> <div dir="ltr" style="text-align: left;" trbidi="on"> <div style="text-align: center;"> <span style="font-weight: normal; line-height: 18.4799995422363px; text-align: left;"><span style="font-family: "georgia" , "times new roman" , serif;"><br></span></span></div> <div style="text-align: justify;"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHNCGv2WoNmY-9ZX5RqLrJR4Eq4OQePpL-fNuwmlyp0ApdZd64tP2kkMgCALYEVqs6WfMCFhKThVI1wCAB-yMcUURsymcudcHqADW8WY_sv6HNs8yx-Kkqk45b3KJ8tbeLEEPEyRMxo4U/s1600/pagination..jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHNCGv2WoNmY-9ZX5RqLrJR4Eq4OQePpL-fNuwmlyp0ApdZd64tP2kkMgCALYEVqs6WfMCFhKThVI1wCAB-yMcUURsymcudcHqADW8WY_sv6HNs8yx-Kkqk45b3KJ8tbeLEEPEyRMxo4U/s1600/pagination..jpg"></a></div> <div style="text-align: center;"> <span style="font-family: "georgia" , "times new roman" , serif;"><br></span></div> <span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-weight: normal; line-height: 18.4799995422363px; text-align: left;"><a href="http://softwarekhani.blogspot.com/">Softwarekhani.blogspot.com</a> provides a technique for Numbered pagination blog posts. Site Navigation is the must need of every blogger blog. We observe that different blogger templates possess different varieties of page numbering nav bar etc. It Just appears like</span></span><br> <div style="text-align: left;"> here as in screenshot...</div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMMG903RxP8-I03dE4GQuEF-cwr1cNsA3lYDYs6dQlKEnYgZIZimgDnw10eKTbyjgCqoFCHPU2JVHGfteQ88vcDv416ERUVEEcXKBtI1utGptThTW3I-QzJ_dWAitGXQTbKDXh3DeAhCM/s1600/pagination+softwarekhani.blogspot.com.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="189" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMMG903RxP8-I03dE4GQuEF-cwr1cNsA3lYDYs6dQlKEnYgZIZimgDnw10eKTbyjgCqoFCHPU2JVHGfteQ88vcDv416ERUVEEcXKBtI1utGptThTW3I-QzJ_dWAitGXQTbKDXh3DeAhCM/s320/pagination+softwarekhani.blogspot.com.jpg" width="320"></a></div> <div style="text-align: center;"> <br></div> <div style="text-align: center;"> <span style="font-family: "georgia" , "times new roman" , serif; line-height: 18.4799995422363px; text-align: left;">or different colour you can customise your colour by editing in HTML.</span></div> </div> <h3 style="text-align: left;"> <span style="font-family: "georgia" , "times new roman" , serif; font-size: small;"><span style="line-height: 18.4799995422363px;">How to add Blogposts Numbering Page Navigation bar ?</span></span></h3> <span style="font-family: "georgia" , "times new roman" , serif; line-height: 22px;">Just follow the below simple steps to add this widget in your blog. Please follow all the steps carefully to add this in your blog. Lets go how to add this numbering in blogger blog.</span><br> <br> <div style="text-align: center;"> <span style="color: #4a4a4a; font-family: "trebuchet ms" , "trebuchet" , "verdana" , sans-serif; font-size: 13.1999998092651px; line-height: 22px;"><br></span></div> <div style="text-align: center;"> <span style="line-height: 22px;"><span style="color: lime; font-family: "georgia" , "times new roman" , serif;"><b>*1st Method*</b></span></span></div> <div style="text-align: center;"> <span style="line-height: 22px;"><span style="color: lime; font-family: "georgia" , "times new roman" , serif;"><b><br></b></span></span></div> <span style="color: red; font-family: "georgia" , "times new roman" , serif; line-height: 22px;"><b>Step1:</b></span><br> <span style="color: red; font-family: "georgia" , "times new roman" , serif; font-size: 13.1999998092651px; line-height: 22px;"><b><br></b></span> <span style="font-family: "georgia" , "times new roman" , serif; line-height: 22px;">1-Go to blogger Dashboard:</span><br> <span style="font-family: "trebuchet ms" , "trebuchet" , "verdana" , sans-serif;"><span style="font-size: 13.1999998092651px; line-height: 22px;"><br></span></span> <span style="font-family: "georgia" , "times new roman" , serif; line-height: 22px;">2-Go to template and Click Edit/Html:</span><br> <span style="color: #4a4a4a; font-family: "trebuchet ms" , "trebuchet" , "verdana" , sans-serif;"><span style="font-size: 13.1999998092651px; line-height: 22px;"><br></span></span> <span style="color: red; font-family: "georgia" , "times new roman" , serif; line-height: 22px;"><b>Now find for the below code:</b></span><br> <span style="color: blue; font-family: "trebuchet ms" , "trebuchet" , "verdana" , sans-serif; font-size: 13.1999998092651px; line-height: 22px;"><br></span> <span style="font-family: "georgia" , "times new roman" , serif; line-height: 22px;">Code 1:</span><span style="font-family: "trebuchet ms" , "trebuchet" , "verdana" , sans-serif; font-size: 13.1999998092651px; line-height: 22px;"> </span><span style="color: blue; font-family: "georgia" , "times new roman" , serif; line-height: 22px;"><b:includable id='mobile-index-post' var='post'></span><br> <span style="color: #4a4a4a; font-family: "trebuchet ms" , "trebuchet" , "verdana" , sans-serif;"><span style="font-size: 13.1999998092651px; line-height: 22px;"><br></span></span> <span style="font-family: "georgia" , "times new roman" , serif; line-height: 22px;">Now paste the below given code before the above Code 1 line:</span><br> <span style="color: orange; font-family: "verdana" , sans-serif;"><span style="line-height: 22px;"><br></span> </span><br> <div style="text-align: center;"> <span style="line-height: 22px;"><span style="color: orange; font-family: "verdana" , sans-serif;">    <b:includable id='page-navi'></span></span></div> <span style="color: orange; font-family: "verdana" , sans-serif;"><br></span> <br> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    <div class='pagenavi'></span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    <script type='text/javascript'></span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    var pageNaviConf = {</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    perPage: 7,numPages: 5,firstText: &quot;First&quot;,</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    lastText: &quot;Last&quot;,</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    nextText: &quot;&#187;&quot;,</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    prevText: &quot;&#171;&quot;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    }</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    </script></span></div> <span style="color: orange; font-family: "verdana" , sans-serif;"><br></span> <br> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;"><br></span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    <script type="text/javascript" src="https://www.googledrive.com/host/0B2ww3WS8P1MJYUpZd21XNXBYYW8"></script></span></div> <span style="color: orange; font-family: "verdana" , sans-serif;"><br></span> <br> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    <div class='clear'/></span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    </div></span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    </b:includable></span></div> <span style="color: #4a4a4a; font-family: "trebuchet ms" , "trebuchet" , "verdana" , sans-serif;"><span style="font-size: 13.1999998092651px; line-height: 22px;"><br></span></span> <span style="color: #4a4a4a; font-family: "trebuchet ms" , "trebuchet" , "verdana" , sans-serif;"><span style="font-size: 13.1999998092651px; line-height: 22px;"><br></span></span> <span style="line-height: 22px;"><span style="color: red; font-family: "georgia" , "times new roman" , serif;"><b>Step2:</b></span><span style="color: #4a4a4a; font-family: "trebuchet ms" , "trebuchet" , "verdana" , sans-serif; font-size: 13.1999998092651px;"> </span></span><br> <span style="color: #4a4a4a;"><span style="font-family: "georgia" , "times new roman" , serif; line-height: 22px;"><br></span></span> <span style="color: #4a4a4a;"><span style="font-family: "georgia" , "times new roman" , serif; line-height: 22px;">Now Click anywhere in the template and Search by Pressing Ctrl+f  for the given below code, means by pressing Ctrl+f after pressing, write this code </span></span><span style="color: blue; font-family: "trebuchet ms" , "trebuchet" , "verdana" , sans-serif; line-height: 22px;"><b:include name='nextprev'/></span><span style="color: #4a4a4a; font-family: "georgia" , "times new roman" , serif; line-height: 22px;">  in search and hit enter.</span><br> <span style="font-family: "georgia" , "times new roman" , serif;"><span style="color: #4a4a4a;"><span style="line-height: 22px;"><br></span></span> </span><span style="line-height: 22px;"><span style="color: #4a4a4a;"><span style="font-family: "georgia" , "times new roman" , serif;">Code 2:</span>  </span><span style="color: blue; font-family: "trebuchet ms" , "trebuchet" , "verdana" , sans-serif;"><b:include name='nextprev'/></span></span><br> <span style="color: red; font-family: "georgia" , "times new roman" , serif; line-height: 22px; text-align: center;"><br></span> <span style="font-family: "georgia" , "times new roman" , serif; line-height: 22px; text-align: center;">Now Replace the above Code 2 with the below given code:</span><br> <div style="text-align: center;"> <br></div> <br> <br> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;"><b:if cond='data:blog.pageType == &quot;index&quot;'></span></div> <span style="color: orange; font-family: "verdana" , sans-serif;"><br></span> <br> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    <b:include name='page-navi'/></span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    <b:else/></span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    <b:if cond='data:blog.pageType == &quot;archive&quot;'></span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    <b:include name='page-navi'/></span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    </b:if></span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    <b:else/></span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    <b:if cond='data:blog.pageType == &quot;item&quot;'></span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    <b:include name='nextprev'/></span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    </b:if></span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    </b:if></span></div> <span style="color: #4a4a4a; font-family: "trebuchet ms" , "trebuchet" , "verdana" , sans-serif;"><span style="font-size: 13.1999998092651px; line-height: 22px;"><br></span></span> <span style="color: #4a4a4a; font-family: "trebuchet ms" , "trebuchet" , "verdana" , sans-serif;"><span style="font-size: 13.1999998092651px; line-height: 22px;"><br></span></span> <span style="color: red; font-family: "georgia" , "times new roman" , serif; line-height: 22px;"><b>Step3:</b></span><br> <span style="color: #4a4a4a;"><span style="font-family: "georgia" , "times new roman" , serif; line-height: 22px;"><br></span></span> <span style="color: #4a4a4a; font-family: "georgia" , "times new roman" , serif; line-height: 22px;">Now find and search same for Code 3:</span><span style="font-family: "trebuchet ms" , "trebuchet" , "verdana" , sans-serif; line-height: 22px;"><span style="color: #4a4a4a; font-size: 13.1999998092651px;">  </span><b><span style="color: blue;">]]></b:skin>  tag</span></b></span><br> <span style="color: #4a4a4a; font-family: "trebuchet ms" , "trebuchet" , "verdana" , sans-serif;"><span style="font-size: 13.1999998092651px; line-height: 22px;"><br></span></span> <span style="font-family: "georgia" , "times new roman" , serif; line-height: 22px;">Now copy the below given code and paste before Code 3:</span><br> <br> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    #blog-pager, .pagenavi {</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">         clear: both;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">         text-align: center;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">         margin: 30px auto 10px;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    }</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    #blog-pager a, .pagenavi span, .pagenavi a {</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">         margin: 0 5px 0 0;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">         padding: 2px 10px 3px;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">         text-decoration: none;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">         color: #fff;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">         background: #2973FC;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">         -moz-border-radius: 2px;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">         -khtml-border-radius: 2px;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">         -webkit-border-radius: 2px;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">         border-radius: 2px;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    -webkit-transition: all .3s ease-in;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    -moz-transition: all .3s ease-in;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    -o-transition: all .3s ease-in;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    transition: all .3s ease-in;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    }</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    #blog-pager a:visited, .pagenavi a:visited {</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">         color: #fff;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    }</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    #blog-pager a:hover, .pagenavi a:hover {</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">         color: #fff;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">         text-decoration: none;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">         background: #000;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    }</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    #blog-pager-older-link, #blog-pager-newer-link {</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">         float: none;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    }</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    .pagenavi .current {</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">         color: #fff;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">         text-decoration: none;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">         background: #000;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    }</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    .pagenavi .pages, .pagenavi .current {</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">         font-weight: bold;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    }</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    .pagenavi .pages {</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">         color: #fff;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">         background: #2973FC;</span></div> <div style="text-align: center;"> <span style="color: orange; font-family: "verdana" , sans-serif; line-height: 22px;">    }</span><br> <span style="font-family: "georgia" , "times new roman" , serif; text-align: left;"><br></span> <span style="font-family: "georgia" , "times new roman" , serif; text-align: left;"><br></span> <span style="font-family: "georgia" , "times new roman" , serif; text-align: left;">Now Friends Click on save template and then you have done;; Enjoy Pagination:</span><br> <span style="font-family: "georgia" , "times new roman" , serif; text-align: left;"><br></span> <span style="font-family: "georgia" , "times new roman" , serif; line-height: 22px;">IF this method is not working for your template, Try the 2nd method inshallah it will....</span><br> <span style="color: #4a4a4a; font-family: "trebuchet ms" , "trebuchet" , "verdana" , sans-serif;"><span style="font-size: 13.1999998092651px; line-height: 22px;"></span></span><br> </div></div></div>

How to Add Numbered Pagination to Blogger Blog Posts

Softwarekhani.blogspot.com provides a technique for Numbered pagination blog posts. Site Navigation is the must need of every blog...

+ Read more »